<template>
    <!-- 编辑客观题 -->
    <div class="objsubMain">
      <div class="objsubContent">
        <h3 style="padding-bottom:10px;">编辑客观题</h3>
        <el-table ref="multipleTable1" :data="objectivelistdata" tooltip-effect="dark" border stripe
            style="width: 100%" @selection-change="handleSelectionChange1"
            :header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }"
            :height="500">
            <el-table-column label="题号编号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.questionNumber"
                  @input="scope.row.questionNumber = onlyNumber(scope.row.questionNumber)" placeholder=""
                  class="fxwidth3"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="题型" width="120" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.basicQuestionTypeId" placeholder="请选择" class="selectbox fxwidth4">
                  <el-option v-for="item in dict.type.question_type" :key="item.value" :label="item.label"
                    :value="String(item.value)">
                  </el-option>
                </el-select>
              </template>
            </el-table-column> 
            <el-table-column label="选项数" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.optionCount"
                  @input="scope.row.optionCount = onlyNumber(scope.row.optionCount)" placeholder=""
                  class="fxwidth3"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="方向" width="120" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.direction" placeholder="请选择" class="selectbox fxwidth4">
                  <el-option v-for="item in questionclassifylist" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column> 
            <el-table-column label="满分" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fullScore"
                  @input="scope.row.fullScore = onlyNumber(scope.row.fullScore)" placeholder=""
                  class="fxwidth3"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center;justify-content: center;">
                  <el-button type="text" size="small" @click="deleteobjquestion(scope.$index)"
                    style="display: flex;align-items: center;color:#EC555A">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="addquestionstbutton">
            <el-button @click="editobjectivequestionssurebc">保存</el-button>
            <el-button @click="editobjectivequestionsgoback">返回</el-button>
          </div>
      </div>
    </div>
</template>

<script>
import { watch } from 'vue';

export default {
  dicts: ["question_type"],
  props:['objectivelistdata'],
    data() {
        return {
            questionclassifylist:[{label:'横向',value:1},{label:'纵向',value:2}],
        }
    },
    methods: {
        handleSelectionChange1 (val) {
            this.multipleSelection1 = val;
        },
        onlyLetters (value) {
            return value.replace(/[^a-zA-Z,]/g, '');
        },
        onlyNumber (value) {
            return value.replace(/[^0-9.]/g, '');
        },
        onlyzzNumber (value) {
            return value.replace(/[^0-9]/g, '');
        },
        // 删除客观题行
        deleteobjquestion (index) {
            if (this.objquestionlist.length > 1) {
                this.objquestionlist.splice(index, 1);
                this.$message({
                type: 'success',
                message: '删除行成功!'
                });
            } else {
                this.$message({
                type: 'warning',
                message: '至少保留一行数据!'
                });
            }
        },
        editobjectivequestionssurebc () {
            this.$emit('updateobjectivequestionssurebc', 1)
        },
        editobjectivequestionsgoback () {
            this.$emit('updateobjectivequestionssurebc', 0)
        },
    }
}
</script>

<style scoped>
.objsubMain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
}
.objsubContent {
  box-sizing: border-box;
  width: 1040px;
  height: 700px;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.objsubContent h3 {
  font-size: 18px;
  font-weight: normal;
}
.objsubattention {
  display: flex;
  font-size: 14px;
  color: #619CF5;
  padding: 10px 0 24px;
}

.gundongtiaotable {
  width: 100%;
  height: 360px;
  display: flex;
}

.gundongtiaotable::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}
.nrlist{
  display: flex;
  align-items: center;
  margin-bottom:20px;
}
.nrlist span{
  display: inline-block;
  padding-right:15px;
  width:80px;
}
.nrlis >>> .el-input{
  width:195px;
}
.nrlist >>> .el-input__inner{
  width:195px;
}
.nrlist:first-child >>> .el-input{
  width:90px;
}
.nrlist:first-child >>> .el-input__inner{
  width:90px;
}
.nrlist:first-child b{
  font-style:normal;
  padding:0 6px;
  font-weight: normal;
}
.nrlist1 b{
  display: block;
  font-weight:normal;
  padding-bottom:15px;

}
.nrlist1  >>> .el-checkbox-group{
  margin-bottom:20px;
}
.addquestionbox{
  width:278px;
  background:#1A48DB;
  text-align: center;
  line-height:30px;
  color:#fff;
  font-size:16px;
  border:none;
}
.addquestionstbutton{
  margin-top:20px;
  display: flex;
  align-items: center;
  padding-right:20px;
}
.addquestionstbutton >>> .el-button{
  width:130px;
  line-height:30px;
  font-size:16px;
  border:none;
}
.addquestionstbutton >>> .el-button:first-child{
  background:#1A48DB;
  text-align: center;
  line-height:30px;
  color:#fff;
}
.addquestionstbutton >>> .el-button:last-child{
  background:rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height:30px;
  color:#1A48DB;
}
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-radius: 4px;
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
  background-color: #E8F0FA;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal
}

.custom-table>>>.el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #D8E4F0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}
.fxwidth {
  font-size: 14px;
  color: #2A303B;
}

.fxwidth>>>.el-input__inner {
  width: 130px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: center;
}
.fxwidth1 {
  font-size: 14px;
  color: #2A303B;
}

.fxwidth1 >>> .el-input__inner {
  box-sizing: border-box;
  width: 200px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px;
}
.fxwidth2{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth2 >>> .el-input__inner {
  box-sizing: border-box;
  width: 281px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px;
}
.fxwidth3{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth3 >>> .el-input__inner {
  box-sizing: border-box;
  width: 35px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: center;
}
.fxwidth4{
  font-size: 14px;
  color: #2A303B;
}

.fxwidth4 >>> .el-input__inner {
  box-sizing: border-box;
  width: 80px;
  height: 30px;
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
  padding: 0;
  text-align: left;
  padding-left:10px;
}
.fxwidth4 >>> .el-input__icon {
  line-height:30px;
}
</style>